<template>
    <div class="header">
        <el-header>
            <div class="title">大白菜花卉市场</div>
            <div class="opt">
                    <a href="javascript:;" v-if="username">{{username}}</a>
                    <a href="javascript:;" v-if="!username" @click="login()">登录</a>
                    <a href="javascript:;" v-if="username" @click="logout()">退出</a>
                    <a href="javascript:;" v-if="username" class="my-cart" @click="goToCart()"><span class="icon-cart"></span>购物车</a>
            </div>
        </el-header>
        <div class="find_div" style="margin-top: 5px; margin-bottom: 45px"  >
            <div style="height: 40px; width:40px; margin-left: 200px; float: left; "  class="icon_div">
                <img class="icon_img" style="height: 40px; width: 40px;" src="../../../assets/img/logo.png">
            </div>
            <div style="height: 40px ; width: 600px; float:right;margin-right: 300px" >
                <el-form style="float: left"
                        :inline="true"
                        class="demo-form-inline"
                        size="small">
                    <el-form-item >
                        <el-input style="width: 400px; height: 80px"
                                v-model="search"
                                placeholder="请输入商品名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" >查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>

import {getToken} from "../../../utill/Token";
import {setToken} from "../../../utill/Token";
import {removeToken} from "../../../utill/Token";
import {user_logout} from "../../../api/api";

export default {
        data() {
            return {
                username: '',
                search:''
            }
        },
        created() {
           let name= getToken("user_name");
           if (name!=''){
               this.username=name;
           }
        },
        methods:{
            logout(){
                user_logout().then((res) => {
                    if (res.data.status === 200) {
                        setToken("user_name","")
                        this.username="";
                        removeToken("user_token");
                    }
                })
            },
            login(){
                this.$router.push({path: '/flowerMarket/login'});
            },
            goToCart(){
                this.$router.push({path: '/flowerMarket/shopcar'});
            }
        }
    }
</script>
<style lang="scss" scoped>
    .header {
        .el-header {
            background: #495966;
            color: #fff;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
            .title {
                width: 200px;
                font-size: 24px;
            }
        }
    }
    .avatar_info {
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    }
    .opt{
        a{
            text-decoration:none;
            color: #fff;
            margin-right: 40px;
        }
    }
</style>
